<template>
    <div class="folder" :class="{'show' : show}">
        <div class="folder-name" @click="show = !show">
            <div class="icon">
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="folder-title" slot="reference">{{folderValue.title}}</div>
        </div>
        <el-collapse-transition>
            <div v-show="show" ref="treeScroll">
                <div class="folder-list">
                    <folder v-for="item in folderValue.folderList" :key="item.id" :folderValue="item"></folder>
                </div>
                <div class="folder-api" v-for="item in folderValue.apiList" :key="item.id">
                    <slot v-bind:item="item"></slot>
                </div>
                <div class="empty" v-if="folderValue.folderList ? (!folderValue.folderList.length && !folderValue.apiList.length) : false">(空)</div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
export default {
    props: ['folderValue'],
    name: 'folder',
    data() {
        return {
            show: false,
        }
    },
}
</script>

<style>

</style>